<template>
    <div class="myfooter">
        <mt-tabbar class="tabbar" v-model="selected">
            <mt-tab-item id="home">
                <span slot="icon" class="iconfont icon-celve"></span>
                <router-link :to="{path: '/home'}" class="tabbar-item">
                    
                    策略
                </router-link>
            </mt-tab-item>
            <mt-tab-item id="cattle">
                <span slot="icon" class="iconfont icon-paihangbang-"></span>
                <router-link :to="{path: '/cattle'}">牛人榜</router-link>
            </mt-tab-item>
            <mt-tab-item id="account">
                <span slot="icon" class="iconfont icon-yinhangqia-"></span>
                <router-link :to="{path: '/account'}">账户</router-link>
            </mt-tab-item>
            <mt-tab-item id="user">
                <span slot="icon" class="iconfont icon-yonghu"></span>
                <router-link :to="{path: '/user'}">我的</router-link>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        name: 'myfooter',
        data() {
            return {
                selected: 'home'
            }
        },
        methods: {
            getURL(){
                var vars = this.$route.path.split('/')[1]
                switch (vars) {
                    case 'home':
                    case 'strategy-detail':
                    case 'follow-strategy':
                        this.selected = 'home'
                        break;
                    case 'cattle':
                    case 'cattle-detail':
                    case 'follow-cattle':
                        this.selected = 'cattle'
                        break;
                    case 'account':
                        this.selected = 'account'
                        break;
                    default:
                        this.selected = 'user'
                }
            }
        },
        created(){
            this.getURL();
            this.$store.dispatch('sync')
        }
        

    }
</script>

<style>
    .mint-tabbar {
        border-top: 1px solid #FFF54C;
        z-index: 9;
    }
    .mint-tab-item {
        padding: 0;
    }
    .mint-tabbar > .mint-tab-item.is-selected {
        background: #FFF54C;
    }
    .mint-tab-item .mint-tab-item-label a{
        display: block;
        color: #ccc;
        font-size: 14px;
        line-height: 20px;
        text-decoration: none;
    }
    .mint-tab-item.is-selected .mint-tab-item-label a {
        color: #7F7B26;
    }
    .mint-tab-item .mint-tab-item-icon .iconfont {
        font-size: 25px;
        color: #ccc;
    }
    .mint-tab-item.is-selected .mint-tab-item-icon .iconfont {
        color: #7F7B26;
    }
            
</style>
